<template>
  <div>
    <!-- 导航栏 -->
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item', item.id==0 ? 'mui-active' : '']"
            v-for="item in Category"
            :key="item.id"
            @click="getphotos(item.id)"
          >{{item.title}}</a>
        </div>
      </div>
    </div>
    <!-- 图片加载区 -->
    <ul class="photo-list">
      <router-link v-for="item in list" :key="item.id" tag="li" :to="'/home/photoinfo/'+item.id">
        <img v-lazy="item.img_url" />
        <div class="info">
          <h1 class="info-title">{{item.title}}</h1>
          <div class="info-body">{{item.zhaiyao}}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
//按需导入提示组件
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      Category: [], //保存图片分类数组
      list: [] //图片数据
    };
  },
  created() {
    this.getAllCategory();
    this.getphotos(0);
  },
  //dom结构被渲染好并放到页面上之后，会执行这个钩子函数
  // 如果要操作元素最好是在mounted之中，因为这个时候元素是最新的，并且在页面中可以获取
  //电脑浏览器验证的话，需要先切入到手机模式。
  mounted() {
     mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    getAllCategory() {
      this.$https
        .get("http://www.liulongbin.top:3005/api/getimgcategory")
        .then(res => {
          if (res.data.status === 0) {
            //成功了将全部这个分类拼接到数组第一项
            res.data.message.unshift({ title: "全部", id: 0 });
            //console.log(res.data);
            this.Category = res.data.message;
          } else {
            Toast("加载图片分类失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getphotos(cateid) {
      this.$https
        .get("http://www.liulongbin.top:3005/api/getimages/" + cateid)
        .then(res => {
          if (res.data.status === 0) {
            //成功了
            this.list = res.data.message;
          } else {
            Toast("加载图片列表失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>


<style lang="scss" scoped>
//用于谷歌浏览器去掉滑动时候的警告
* {
  touch-action: pan-y;
}
.photo-list {
  //去掉样式
  list-style: none;
  margin: 0;
  padding: 10px;
  padding-bottom: 0;
  li {
    background-color: #ccc;
    text-align: center;
    margin-bottom: 10px;
    // 设置阴影，参照css3手册修改
    box-shadow: 0 0 9px #999;
    position: relative; //父亲设置为相对定位，保证位置不变。
    // 理解是对的,相对定位和绝对定位的区别就是一个是脱离了文档流,一个没有脱离文档流,相对定位是相对于自身定位,而绝对定位是相对于自身的最近的父辈有绝对定位或相对定位的元素进行定位.,要是父辈都没有绝对定位或者相对定位,就会相对于根元素进行(body,html)进行定位..当父级设置了绝对定位之后,子级的绝对定位也会受父级绝对定位的影响..所以一般为了让父级元素不懂,一帮都用父级元素进行相对定位,所以你的理解是正确的.
    img {
      width: 100%;
      // 把此元素放置在父元素的中部。
      vertical-align: middle;
    }
    // 这是css的属性选择器，比如
    // <img src="1.gif" />
    // <img src="2.gif" alt="hehe" />
    // 上面是两个图片标签，其中第一个没有alt属性，第二个则有alt属性，那么我们可以用下面的css语句给第二个图片标签添加样式：
    // img[alt] {border:2px solid #f00}
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .info {
      text-align: left;
      background-color: rgba(0, 0, 0, 0.4);
      color: white;
      position: absolute; //儿子设成绝对定位，会根据最近的定位好的定位进行定位。
      bottom: 0px;
      max-height: 84px;
      .info-title {
        font-size: 14px;
      }
      .info-body {
        font-size: 13px;
      }
    }
  }
}
</style>